<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统通知</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: transparent;
      overflow: hidden;
      -webkit-app-region: no-drag;
    }

    .toast-container {
      width: 309px;
      background: #ffffff;
      border-radius: 9px;
      padding: 1px;
      border: none;
      box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
      animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      will-change: transform, opacity;
    }

    @keyframes slideIn {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideOut {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      100% {
        transform: translateX(120%);
        opacity: 0;
      }
    }

    .toast-container.slide-out {
      animation: slideOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .toast-header {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 8px;
      padding: 10px;
    }

    .toast-header-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: -2px;
      margin-left: -2px;
    }

    .toast-icon {
      width: 18.83px;
      height: 18.83px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .toast-icon svg {
      width: 100%;
      height: 100%;
    }

    .toast-label {
      font-size: 12px;
      font-weight: 500;
      color: #8c8c8c;
    }

    .toast-title {
      font-size: 14px;
      font-weight: 600;
      color: #262626;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .toast-content {
      display: none;
    }

    .toast-content::-webkit-scrollbar {
      width: 4px;
    }

    .toast-content::-webkit-scrollbar-track {
      background: #f0f0f0;
      border-radius: 2px;
    }

    .toast-content::-webkit-scrollbar-thumb {
      background: #bfbfbf;
      border-radius: 2px;
    }

    .toast-actions {
      display: flex;
      gap: 9px;
      justify-content: flex-end;
      padding: 0 10px 10px 10px;
    }

    .btn {
      padding: 5px 14px;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      outline: none;
      user-select: none;
    }

    .btn:active {
      transform: scale(0.95);
    }

    .btn-secondary {
      background: #f5f5f5;
      color: #595959;
    }

    .btn-secondary:hover {
      background: #e8e8e8;
    }

    .btn-primary {
      background: #028FFE;
      color: white;
    }

    .btn-primary:hover {
      background: #40a9ff;
    }

    .close-btn {
      position: absolute;
      top: 9px;
      right: 9px;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #8c8c8c;
      font-size: 16px;
      transition: all 0.2s ease;
      opacity: 0.6;
    }

    .close-btn:hover {
      opacity: 1;
      background: #f0f0f0;
      transform: rotate(90deg);
    }
  </style>
</head>
<body>
  <div class="toast-container">
    <button class="close-btn" id="closeBtn">×</button>
    <div class="toast-header">
      <div class="toast-header-row">
        <div class="toast-icon" id="toastIcon"></div>
        <div class="toast-label">系统通知</div>
      </div>
      <div class="toast-title" id="toastTitle">通知标题</div>
    </div>
    <div class="toast-content" id="toastContent">
      通知内容加载中...
    </div>
    <div class="toast-actions">
      <button class="btn btn-secondary" id="laterBtn">稍后再读</button>
      <button class="btn btn-primary" id="detailBtn">查看详情</button>
    </div>
  </div>

  <script>
    const { ipcRenderer } = require('electron');

    // 获取URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const notificationData = JSON.parse(decodeURIComponent(urlParams.get('data') || '{}'));

    // 优先级颜色映射
    const priorityColors = {
      urgent: '#ff4d4f',
      high: '#fa8c16',
      normal: '#1890ff',
      low: '#8c8c8c'
    };

    // 渲染通知内容
    function renderNotification() {
      const titleElement = document.getElementById('toastTitle');
      const icon = document.getElementById('toastIcon');
      
      // 显示标题，超过25个字符时截断并添加省略号
      if (notificationData.title) {
        let displayTitle = notificationData.title;
        if (displayTitle.length > 25) {
          displayTitle = displayTitle.substring(0, 25) + '...';
        }
        titleElement.textContent = displayTitle;
      } else {
        titleElement.textContent = '系统通知';
      }
      
      // 设置图标颜色（固定为 #FAAD14）
      icon.innerHTML = `
        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 170.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v341.333333a42.666667 42.666667 0 0 0 85.333334 0V298.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z m0 554.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z" fill="#FAAD14"></path>
        </svg>
      `;
    }

    // 查看详情按钮
    document.getElementById('detailBtn').addEventListener('click', () => {
      ipcRenderer.send('notification-toast-action', {
        action: 'detail',
        notificationId: notificationData.id
      });
      closeWindow();
    });

    // 稍后再读按钮
    document.getElementById('laterBtn').addEventListener('click', () => {
      ipcRenderer.send('notification-toast-action', {
        action: 'later',
        notificationId: notificationData.id
      });
      closeWindow();
    });

    // 关闭按钮
    document.getElementById('closeBtn').addEventListener('click', () => {
      ipcRenderer.send('notification-toast-action', {
        action: 'close',
        notificationId: notificationData.id
      });
      closeWindow();
    });

    // 关闭窗口动画
    function closeWindow() {
      const container = document.querySelector('.toast-container');
      container.classList.add('slide-out');
      
      setTimeout(() => {
        ipcRenderer.send('close-notification-toast');
      }, 350);
    }

    // 初始化
    renderNotification();

    console.log('[NotificationToast] 通知弹窗已加载:', notificationData);
  </script>
</body>
</html>
